<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>给用户分配班级</title>
		<link rel="stylesheet" type="text/css" href="css/qingjia.css">
		<link rel="stylesheet" type="text/css" href="css/admin.css">
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		
		<div id="container">
			<div id="menu">

				<div class="menu-level-0">给用户分配角色</div>
				<div class="menu-level-1"><a href="admin-yifenpeijuese.html">已分配角色的用户</a></div>
				<div class="menu-level-1"><a href="admin-fenpeibanji.html">给用户分配班级</a></div>
				<div class="menu-level-1"><a href="admin-yifenpeibanji.html">已分配班级的用户</a></div>
				<div class="menu-level-1"><a href="admin.html">给班级分配老师</a></div>
				<div class="menu-level-1"><a href="admin-yifenpeijuese.html">已分配老师的班级</a></div>
			</div>
			
			<div id="qingjia">
				
				<div id="qingjia-left">
					<!-- qingjia-left -->
				</div>
				<div id="qingjia-right">
					<!-- qingjia-right -->
					<div id="qingjia-right-top">
						<!-- qingjia-right-top -->
						
						<div id="qingjia-right-top-top">
							给用户分配班级
						</div>
						<div id="qingjia-right-top-bottom">
							
							<table class="fenpeijuese" id="weifenpeijuese">
								<thead>
									<tr>
										<td>学生ID</td>
										<td>姓名</td>
										<td>手机号码</td>
										<td>可分配的班級</td>
										<td>操作</td>
									</tr>
								</thead>
								
								<tbody>
									<!-- rs中的数据进行渲染 -->
									<tr v-for="student in rs">
										<td>{{student.id}}</td>
										<td>{{student.name}}</td>
										<td>{{student.phone}}</td>
										
										<td>
											<select class="class-select"  @change="changeProduct($event)">
												<option>请选择</option>
												<option v-bind:id="clazz.id" :value="clazz.id" v-for="clazz in classres">{{clazz.name}}</option>
											</select>
										</td> 

										
										<td>
											<input class="fenpei" type="button" value="分配班級" v-on:click="add(student.id)"/> 
										</td>
											
									</tr>
								</tbody>
								
							</table>
						</div>
						
					</div>
					
				</div>
				
			</div>
		</div>
	</body>
	
	<script>
	
	window.onload=function(){
		var vue=new Vue({
			el:'#weifenpeijuese',
			data:{
				 weifenpeijuese:[],
				 checkDate:[],
				 rs:[],
				 classres:[],
				 
			}, 
			methods:{
				add(id){
					console.log(id)
					console.log(this.classres)
					var userId=id
					var id=this.classres
					var clazzId=parseInt(id);
					var datas=
					{"userId":userId,
					"clazzId":clazzId}
					
					var url='http://localhost:8080/kaoqin/clazzStudentTeacher/addStudent'
					axios.post(url,datas).then(function(backdatas){
						location.reload();
					})
					
					
				},changeProduct(event) {
					             var rs = event.target.value; //获取option对应的value值
					             vue.classres=rs
					           },
			
			},
			created:async function(){
				// 数据请求
				const result = await axios.post("http://localhost:8080/kaoqin/clazzStudentTeacher/findStudent",{id:20010})
				console.log(result);
				// 把数据装到rs数组里面
				this.rs = result.data.data
				
				// 数据请求
				const res = await axios.post("http://localhost:8080/kaoqin/clazz/findAllClazz")
				console.log(res);
				// 把数据装到rs数组里面
				this.classres = res.data.data
			}

		})
		
	}
	
	
</script>
	
	
	
</html>
